<template>
	<view class="container">
		<form @submit="submitForm" class="form">
			<!-- 个人信息 -->
			<view class="infoBox">
				<!-- 姓名 -->
				<view class="formItem1">
					<text>{{ app.language.name }}:</text>
					<view class="formB">
						{{form.tname}}
					</view>
				</view>
				<!-- 公民身份证号 -->
				<view class="formItem1">
					<text>{{ app.language.ldy_card }}:</text>
					<view class="formB">
						{{form.tcard}}
					</view>
				</view>
				<!-- 联系电话 -->
				<view class="formItem1">
					<text>{{ app.language.phone }}:</text>
					<view class="formB">
						{{form.tphone}}
					</view>
				</view>
				<!-- 性别 -->
				<view class="formItem1">
					<text><text class="bt">*</text>{{ app.language.gender }}:</text>
					<view class="formB">
						<picker mode="selector" name="gender" :range="genderList" @change="onChangeCzGender">
							<view class="picker">
								{{selectedGenderValue}}
							</view>
						</picker>
					</view>
				</view>
				<!-- 民族 -->
				<view class="formItem1">
					<text><text class="bt">*</text>{{ app.language.nation }}:</text>
					<view class="formB">
						<picker mode="selector" name="pcs" :range="mzlist" @change="onmzChange">
							<view class="picker">
								{{selectedmzValue}}
							</view>
						</picker>
					</view>
				</view>
				<!-- 开具证明内容 -->
				<view class="formItem1">
					<text><text class="bt">*</text>{{ app.language.xg_zmName }}:</text>
					<view class="formB kjzm">
						{{name}}
					</view>
				</view>
				<!-- 户籍所在派出所 -->
				<view class="formItem1">
					<text><text class="bt">*</text>{{ app.language.sldw }}:</text>
					<view class="formB">
						<picker mode="selector" name="pcs" :range="list" @change="onChange">
							<view class="picker">
								{{selectedValue}}
							</view>
						</picker>
					</view>
				</view>
			</view>
			<view class="infoBox1">
				<!-- 居民身份证正面 -->
				<view class="formItem">
					<text><text class="bt">*</text>{{ app.language.brImg }}:</text>
					<view class="hjbImg">
						<button type="default" @click="chooseImg(1)">{{ app.language.scimg }}</button>
					</view>
					<view class="scimageBox" v-if="brImg.length>0">
						<view class="del" @click="delImg(brImg,1)">
							<image class="delImg" src="/static/dels.png"></image>
						</view>
						<image class="scimage" :src="apiUrl+item" v-for="(item,index) in brImg" :key='index'
							@click="previewImg(item)"></image>
					</view>
					<!-- <image class="scimage" :src="item" v-for="(item,index) in jmcarz" :key='index' @click="previewImg(item)"></image> -->
				</view>
				<view class="formItem">
					<text><text class="bt">*</text>{{ app.language.sfzzfm }}:</text>
					<view class="hjbImg">
						<button type="default" @click="chooseImg(2)">{{ app.language.scimg }}</button>
					</view>
					<view class="scimageBox" v-if="sfzImg.length>0">
						<view class="del" @click="delImg(sfzImg,2)">
							<image class="delImg" src="/static/dels.png"></image>
						</view>
						<image class="scimage" :src="apiUrl+item" v-for="(item,index) in sfzImg" :key='index'
							@click="previewImg(item)"></image>
					</view>
					<!-- <image class="scimage" :src="item" v-for="(item,index) in sfzzfmList" :key='index' @click="previewImg(item)"></image> -->
				</view>
			</view>
			<view class="wyyd">
				<checkbox-group @change="checkboxChange">
					<label>
						<checkbox value="ok" :checked="checkValue" color="#05bdfd" style="transform:scale(0.7)" />
						{{ app.language.isccns }}</text>
					</label>
				</checkbox-group>
			</view>
			<!-- 承诺书签字 -->
			<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" class="popup" :maskClick="false">
				<view class="qianzi">
					<view class="de2">
						<image src='/static/del.png' @click='hidePopup'></image>
					</view>
					<view style='width:90%;min-height:600rpx;margin:0 auto;'>
						<view
							style='width:100%;text-align: center;font-size: 30rpx;font-weight: bold;height:100rpx;line-height: 100rpx;'>
							{{ app.language.cnsName }}</view>
						<view style='font-size: 28rpx;line-height: 40rpx;text-indent:56rpx'>
							{{ app.language.cnsnr }}
						</view>
						<view class="qz" @click='show' v-if="!signImage">{{ app.language.ksSign }}</view>
						<view class="czbtn" v-if="signImage">
							<view class="delBtn" @click='delBtn'>
								{{ app.language.delBtn }}
							</view>
							<view class="okBtn" @click='okBtn'>
								{{ app.language.okBtn }}
							</view>
						</view>
						<view v-if='signImage' style='text-align: right;'>
							<image :src='signImage' style='width:200rpx;height:100rpx;'></image>
						</view>
					</view>

					<myPopup ref="pop" @hide='hide'>
						<view
							style='background-color: #FFFFFF;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;'>
							<view class="del1">
								<image src='/static/del.png' @click='hide'></image>
							</view>
							<view
								style='width:100%;height:100rpx;line-height: 100rpx;font-size: 30rpx;font-weight: bold;text-align: center;'>
								{{ app.language.cnsName }}</view>
							<canvas class='firstCanvas' canvas-id="firstCanvas" @touchmove='move'
								@touchstart='start($event)' @touchend='end' @touchcancel='cancel' @longtap='tap'
								disable-scroll='true' @error='error'>
							</canvas>

							<view class="caozuo">
								<view class="chongqian" @tap='clearClick'>
									{{ app.language.chongqian }}
								</view>
								<view class="over" @click="overSign">
									{{ app.language.wcqm }}
								</view>
							</view>
						</view>
					</myPopup>
				</view>
			</uni-popup>
			<!-- 提交 -->
			<button @click="getAdd" class="submit">{{ app.language.tijiao }}</button>
		</form>
	</view>
</template>

<script>
	import graceChecker from "../../components/graceChecker.js"
	import {
		getPcsList,
		getNationality,
		geAgent
	} from '@/api/api.js'
	import {
		getAddIssueCertificate
	} from '@/api/domicile.js'
	const global = getApp().globalData;
	// 签字
	var content = null;
	var touchs = [];
	var canvasw = 0;
	var canvash = 0;
	var _that;
	//获取系统信息
	uni.getSystemInfo({
		success: function(res) {
			canvasw = res.windowWidth;
			canvash = res.windowHeight;
		},
	})
	import myPopup from '@/components/qianxiao-pop/qianxiao-pop.vue'
	import config from '@/config.js';
	export default {
		components: {
			myPopup
		},
		data() {
			return {
				apiUrl: config.baseUrl,
				app: {
					global: global,
					name: global.appName,
					language: global.language
				},
				name: "",
				form: {
					tname: "",
					tcard: "",
					tphone: "",
					agent: "",
					chooseImags: [],
				},
				name: "",
				// 派出所
				list: [],
				selectedValue: '',
				// 性别
				genderList: [],
				selectedGenderValue: '',
				jmcarz: [], //身份证正面照
				jmcarf: [], //身份证反面照
				srcImg: [],
				token: "",
				// 派出所
				pcsList: [],
				list: [],
				brImg: [],
				sfzImg: [],
				// 签字
				signImage: '',
				isEnd: false, // 是否签名
				// 点击上传承诺书按钮
				checkbox: false,
				checkValue: false,
				// 民族
				selectedmzValue: "",
				mzlist: [],
				mzslist: [],
				selectedGenderValue: "",
				genderList: [],
				xingbieList: [],
			}
		},
		onLoad(options) {
			this.name = options.name
			this.selectedValue = this.app.language.qxz
			this.selectedGenderValue = this.app.language.qxz
			this.selectedmzValue = this.app.language.qxz
			this.selectedGenderValue = this.app.language.qxz
			this.getToken()
			this.getPcs();
			this.getMzList();
			this.getagent();
			_that = this
			//获得Canvas的上下文
			content = uni.createCanvasContext('firstCanvas', _that)
			//设置线的颜色
			content.setStrokeStyle("#000")
			//设置线的宽度
			content.setLineWidth(5)
			//设置线两端端点样式更加圆润
			content.setLineCap('round')
			//设置两条线连接处更加圆润
			content.setLineJoin('round')
		},
		methods: {
			// 获取缓存
			getToken() {
				let that = this
				uni.getStorage({
					key: 'loginData',
					success: function(res) {
						console.log('res', res)
						that.form.reportType = res.data.userInfo.peopleType
						that.token = res.data.userInfo.appToken
						that.form.tphone = res.data.userInfo.phonenumber
						that.form.tcard = res.data.userInfo.idcard
						that.form.tname = res.data.userInfo.userName
					}
				});
			},

			// 获取派出所列表
			getPcs() {
				let data = {
					"": ""
				}
				getPcsList(data).then((res) => {
					this.pcsList = res.data
					if (res.code == 200) {
						for (let i = 0; i < res.data.length; i++) {
							this.list.push(res.data[i].deptName);
						}
					}
				})
			},

			// 获取名族列表
			getMzList() {
				getNationality().then((res) => {
					this.mzslist = res.rows
					for (let i = 0; i < res.rows.length; i++) {
						this.mzlist.push(res.rows[i].dictLabel);
					}
				})
			},

			// 上传照片
			chooseImg(item) {
				this.imgId = item
				uni.chooseImage({
					count: 5,
					success: (res) => {
						this.srcImg = res.tempFilePaths

						let tempFilePaths = res.tempFilePaths;
						// this.tempFilePathList = res.tempFilePaths;
						let base64List = this.form.chooseImags;
						// 图片路径转换成base64格式
						tempFilePaths.forEach((item, index) => {
							uni.getFileSystemManager().readFile({
								filePath: item, // 图片文件路径
								encoding: 'base64', // 编码格式为base64
								success: res => { // 成功回调
									let base64 = 'data:image/jpeg;base64,' + res
									.data; // 拼接data URI
									base64List.push(base64);
									if (base64List.length === tempFilePaths.length) {
										this.form.chooseImags = base64List;
									}
								},
								fail: err => {
									console.error('读取文件失败', err);
								}
							});
						});

						// 上传图片并返回路径
						let imgList = [];
						// 上传前显示加载中
						uni.showLoading({
							title: this.app.language.jzz,
						});
						tempFilePaths.forEach((tempFilePaths) => {
							const uploadTask = uni.uploadFile({
								url: 'https://mqzhian.cn:8088/common/upload', // 你的ThinkPHP服务器地址
								filePath: tempFilePaths,
								name: 'file', // 这里根据服务器接收的字段来定义
								success: (uploadFileRes) => {
									const data = JSON.parse(uploadFileRes.data);
									console.log('上传成功', data);
									// 上传成功后隐藏加载中
									uni.hideLoading();
									// 这里处理返回的图片路径，例如保存到数组中
									imgList.push(data.fileName);
									if (item == 1) {
										this.brImg = imgList
										this.form.idcardFront = imgList.join(',')
									} else if (item == 2) {
										this.sfzImg = imgList
										this.form.idcardBack = imgList.join(',')
									}
								},
								fail: (error) => {
									console.error('上传失败', error);
									uni.showToast({
										title: '上传失败',
										icon: 'none',
									});
								}
							});
						});
					}
				})
			},

			// 预览图片
			previewImg(current) {
				uni.previewImage({
					current,
					urls: this.srcImg,
					// 图片指示器样式: 小圆点
					indicator: 'default',
					// 循环预览
					loop: true
				})
			},

			// 预览图片
			previewImg(current) {
				uni.previewImage({
					current,
					urls: this.srcImg,
					// 图片指示器样式: 小圆点
					indicator: 'default',
					// 循环预览
					loop: true
				})
			},

			// 获取性别列表
			getagent() {
				geAgent().then((res) => {
					this.xingbieList = res.rows
					for (let i = 0; i < res.rows.length; i++) {
						this.genderList.push(res.rows[i].dictLabel);
					}
				})
			},

			// 选择性别
			onChangeCzGender(e) {
				this.selectedGenderValue = this.genderList[e.detail.value];
				this.form.agent = this.xingbieList[e.detail.value].dictValue;
			},

			// 选择派出所
			onChange(e) {
				this.selectedValue = this.list[e.detail.value];
				this.form.policeStation = this.pcsList[e.detail.value].deptId;
			},

			// 民族
			onmzChange(e) {
				console.log('2', this.mzslist)
				this.selectedmzValue = this.mzslist[e.detail.value].dictLabel;
				this.form.nationality = this.mzslist[e.detail.value].dictValue;
			},

			// 删除图片
			delImg(list, id) {
				console.log('id', id)
				console.log('list', list)
				uni.showModal({
					title: this.app.language.titDel, // 弹框标题
					content: this.app.language.delBtn, // 弹框内容
					cancelText: this.app.language.popCancelText, // 取消按钮文本
					confirmText: this.app.language.popConfirmText, // 确认按钮文本
					success: (res) => {
						if (res.confirm) {
							// 用户点击了“确定”按钮
							if (id == 1) {
								this.brImg = []
							} else if (id == 2) {
								this.sfzImg = []
							}
						} else if (res.cancel) {
							// 用户点击了“取消”按钮，或者关闭了弹框
							console.log('用户取消删除');
						}
					}
				});
			},

			// 签字功能
			// 我已阅读选中事件
			checkboxChange(e) {
				if (e.detail.value.length > 0) {
					this.checkbox = true
					this.checkValue = true
					this.$refs.popup.open('bottom')
				} else {
					this.checkbox = false
					this.checkValue = false
					this.signImage = ""
					this.form.letterCommitment = ""

				}
				console.log('this.checkbo', this.checkbox)
			},
			hide() {
				// #ifdef MP-WEIXIN
				_that.$refs.pop.hide();
				// #endif
				// #ifdef APP-PLUS
				_that.$nextTick(() => {
					_that.$refs.pop.hide()
				})
				// #endif
			},
			show() {
				// #ifdef MP-WEIXIN
				_that.$refs.pop.show();
				// #endif
				// #ifdef APP-PLUS
				_that.$nextTick(() => {
					_that.$refs.pop.show()
				})
				// #endif

			},
			overSign: function() {
				if (_that.isEnd) {
					uni.canvasToTempFilePath({
						canvasId: 'firstCanvas',
						success: function(res) {
							//打印图片路径
							console.log(res.tempFilePath)
							console.log('完成签名')
							//设置图片
							_that.signImage = res.tempFilePath;


						}
					})
					_that.hide()
					_that.clearClick()
				} else {
					uni.showToast({
						title: this.app.language.qxwcqm,
						icon: "none",
						duration: 1500,
						mask: true
					})
				}

			},

			// 画布的触摸移动开始手势响应
			start: function(event) {
				// console.log(event)
				// console.log("触摸开始" + event.changedTouches[0].x)
				// console.log("触摸开始" + event.changedTouches[0].y)
				//获取触摸开始的 x,y
				let point = {
					x: event.changedTouches[0].x,
					y: event.changedTouches[0].y
				}
				// console.log(point)
				touchs.push(point);

			},
			// 画布的触摸移动手势响应
			move: function(e) {
				let point = {
					x: e.touches[0].x,
					y: e.touches[0].y
				}
				// console.log(point)
				touchs.push(point)
				if (touchs.length >= 2) {
					this.draw(touchs)
				}
			},

			// 画布的触摸移动结束手势响应
			end: function(e) {
				// 设置为已经签名
				this.isEnd = true;
				console.log('end')
				// 清空轨迹数组
				touchs.pop()
				// for (let i = 0; i < touchs.length; i++) {
				// 	touchs.pop()
				// }

			},

			// 画布的触摸取消响应
			cancel: function(e) {},

			// 画布的长按手势响应
			tap: function(e) {},
			//画布触摸错误
			error: function(e) {},

			//绘制
			draw: function(touchs) {
				let point1 = touchs[0]
				let point2 = touchs[1]
				touchs.shift()
				content.moveTo(point1.x, point1.y)
				content.lineTo(point2.x, point2.y)
				content.stroke()
				content.draw(true)
			},
			//清除操作
			clearClick: function() {
				// 设置为未签名
				this.isEnd = false
				//清除画布
				content.clearRect(0, 0, canvasw, canvash)
				content.draw(true)
			},

			// 点击hidePopup关闭弹窗
			hidePopup() {
				this.form.letterCommitment = ""
				this.signImage = ""
				this.checkValue = false
				this.$refs.popup.close()
			},

			// 删除签字的图片
			delBtn() {
				this.signImage = ""
				this.form.letterCommitment = ""
			},

			// 确定签字的图片--上传图片
			okBtn() {
				let tempFilePaths = this.signImage;
				let chooseImag = "";
				let base64List = this.chooseImag;
				// 图片路径转换成base64格式
				uni.getFileSystemManager().readFile({
					filePath: this.signImage, // 图片文件路径
					encoding: 'base64', // 编码格式为base64
					success: res => { // 成功回调
						let base64 = 'data:image/jpeg;base64,' + res.data; // 拼接data URI
						base64List = base64;
					},
					fail: err => {
						console.error('读取文件失败', err);
					}
				});

				// 上传图片并返回路径
				let imgList = "";
				// 上传前显示加载中
				uni.showLoading({
					title: this.app.language.jzz,
				});
				const uploadTask = uni.uploadFile({
					url: 'https://mqzhian.cn:8088/common/upload', // 你的ThinkPHP服务器地址
					filePath: tempFilePaths,
					name: 'file', // 这里根据服务器接收的字段来定义
					success: (uploadFileRes) => {
						const data = JSON.parse(uploadFileRes.data);
						this.form.letterCommitment = data.fileName
						if (this.form.letterCommitment) {
							this.checkValue = true
						} else {
							this.checkValue = false
						}
						// 上传成功后隐藏加载中
						uni.hideLoading();
						this.$refs.popup.close()
					},
					fail: (error) => {
						console.error('上传失败', error);
						uni.showToast({
							title: this.app.language.scerror,
							icon: 'none',
						});
					}
				});
			},

			// 提交
			getAdd() {
				if (!this.selectedValue || this.selectedValue === this.app.language.qxz) {
					uni.showToast({
						title: this.app.language.hjpcsTx,
						icon: 'none',
					});
					return
				}

				if (!this.selectedmzValue || this.selectedmzValue === this.app.language.qxz) {
					uni.showToast({
						title: this.app.language.ination,
						icon: 'none',
					});
					return
				}

				if (this.brImg.length == 0) {
					uni.showToast({
						title: this.app.language.ibrImg,
						icon: 'none',
					});
					return
				}

				if (this.sfzImg.length == 0) {
					uni.showToast({
						title: this.app.language.icards,
						icon: 'none',
					});
					return
				}

				if (!this.checkValue) {
					uni.showToast({
						title: this.app.language.qisccns,
						icon: 'none',
					});
					return
				}
				uni.showLoading({
					title: this.app.language.jzz,
				});
				this.form.appToken = this.token
				console.log('this.form', this.form)
				getAddIssueCertificate(this.form).then((res) => {
					if (res.code == 200) {
						uni.hideLoading();
						uni.showToast({
							title: this.app.language.qddsh,
							icon: 'success',
						});
						setTimeout(() => {
							console.log('跳转首页')
							uni.reLaunch({
								url: '/pages/related/index'
							});
						}, 1000);
					}
				})

			}
		}
	}
</script>

<style>
	.container {
		padding: 20rpx;
	}

	.form {
		box-shadow: 1px 1px 10rpx #ddd;
		/* display: block; */
		width: 100%;
		padding-bottom: 20rpx;
	}

	.formItem {
		margin: 10rpx 0;
		padding: 10rpx;
		/* height: 162rpx; */
		position: relative;
		border-bottom: 1px dashed #ddd
	}

	.infoBox {
		border: 1px solid #ddd;
		padding: 0 20rpx;
		box-shadow: 1px 1px 10rpx #ddd;
	}

	.infoBox1 {
		border: 1px solid #ddd;
		margin-top: 20rpx;
		padding: 0 15rpx;
		box-shadow: 1px 1px 10rpx #ddd;
	}

	.formItem1 {
		margin: 10rpx 0;
		padding: 10rpx;
		/* height: 162rpx; */
		position: relative;
		border-bottom: 1px dashed #ddd
	}

	.formB {
		/* background-color: #f3f3f3; */
		font-size: 24rpx;
		padding: 10rpx;
		margin-top: 10rpx;
		position: absolute;
		right: 10rpx;
		top: -2rpx;
		color: #808080;
	}

	.formItem text,
	.formItem1 text {
		font-size: 26rpx;
	}

	.hjbImg button {
		font-size: 22rpx;
		width: 149rpx;
		height: 56rpx;
		background: #2f8ef9;
		color: #fff;
	}

	.hjbImg {
		/* position: absolute;
		bottom: 10rpx; */
		width: 150rpx;
		margin-top: 20rpx;
	}

	.scimage {
		width: 121rpx;
		height: 80rpx;
		margin-right: 10rpx;
		margin-top: 5px;
		border-radius: 5rpx;
	}

	.title {
		margin-top: 30rpx;
		font-weight: bold;
		font-size: 28rpx;
	}

	.submit {
		background-color: #2f8ef9;
		color: #fff;
		font-size: 28rpx;
		width: 95%;
		margin: 20rpx auto 0;
	}

	.bt {
		color: red;
		margin-right: 5rpx;
	}

	.picker {
		padding: 10px;
		margin-top: -25rpx;
		width: 243rpx;
		color: #808080;
		text-align: right !important;
	}

	.kjzm {
		width: 260rpx;
		color: #808080;
		text-align: right;
	}

	.del {
		color: red;
		font-size: 26rpx;
		text-align: right;
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		right: 0;
		top: -43rpx;
	}

	.delImg {
		width: 50rpx;
		height: 50rpx;
	}

	.scimageBox {
		display: inline-block;
		width: 100%;
		height: 100rpx;
		position: relative;
		/* text-align: center; */
	}

	/* 签字功能 */
	.ts {
		color: #FF485D;
		font-size: 30upx;
		height: 100upx;
		line-height: 100upx;
		padding-left: 20upx;
	}

	canvas {
		background-color: #f2f2f2;
		width: 100%;
		height: 20vh;
		/* margin: 0 25upx; */
		/* height: calc(100vh - 140upx); */
	}

	.contents {
		padding-top: 20upx;
		padding-bottom: 100upx;
		box-sizing: border-box;
	}

	#signatureImg {
		background-color: #EEEEEE;
	}

	.chongqian {
		background-color: #FF8F58;
	}

	.over {
		background-color: #0599D7;
	}

	/* 承诺书弹窗 */
	.qianzi {
		background: #fff;
		position: relative;
	}

	.qz {
		text-align: center;
		font-size: 26rpx;
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #2f8ef9;
		color: #FFFFFF;
		border-radius: 40rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		position: absolute;
		top: 350rpx;
		right: 0;
		left: 0;
	}

	.vue-ref {
		padding-bottom: 0 !important;
	}

	.wyyd {
		font-size: 24rpx;
		text-align: center;
		margin-top: 10rpx;
	}

	.caozuo {
		display: flex;
		height: 100rpx;
		width: 100%;
		margin-top: 20rpx;
		font-size: 28rpx;

	}

	.caozuo view {
		width: 40%;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		color: #FFFFFF;
		margin-left: 5%;
		border-radius: 40rpx;
	}

	.caozuo view:last-child {
		width: 40%;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		color: #FFFFFF;
		margin-left: 10%;
	}

	.caozuo view:active {
		background-color: #CCCCCC;
		color: #333333;
	}

	.chongqian {
		background-color: #FF8F58;
	}

	.over {
		background-color: #2f8ef9;
	}

	.del1 {
		text-align: right;
		position: relative;
		top: 15rpx;
		right: 15rpx;
	}

	.del1 image {
		width: 40rpx;
		height: 40rpx;
	}

	.czbtn {
		position: absolute;
		top: 350rpx;
		margin: 0 auto;
		right: 0;
		left: 0;
		display: flex;
		width: 450rpx;
	}

	.czbtn view {
		margin: 0 20rpx;
		width: 190rpx;
		padding: 15rpx 0;
		text-align: center;
		border-radius: 5rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.okBtn {
		background: #2f8ef9;
	}

	.delBtn {
		background: red;
	}

	.de2 {
		text-align: right;
		position: relative;
		top: 15rpx;
		right: 15rpx;
	}

	.de2 image {
		width: 40rpx;
		height: 40rpx;
	}
</style>